<template>

  <el-row :gutter="20">
    <el-col :span="16"><div class="grid-content bg-purple">
<!--      left-->
<!--      <img class="demo" src="https://dummyimage.com/700x400/fc0101" alt="">-->
      <el-col :span="16 " :offset="4">
        <div id="newMessages">
          <el-card  :body-style="{ padding: '50px' }">
            <div >
              <span style="font-size: x-large;">{{test.pId}}</span><br>
              <span style="font-size: x-large">重庆交通大学慧苑小区热水器设备</span></div>
            <div>上传者：（{{test.sId}}）</div>
            <el-button type="primary" @click="getFile(test.cFileUrl)">下载提交文件</el-button>
            <el-input type="textarea"  :rows="2" v-model="feedBack" placeholder="反馈" class="feedBakcInput"></el-input>
            <el-button type="info" @click="submitFeedback(test.pId,2)">打回重做</el-button>
            <el-button type="primary" @click="submitFeedback(test.pId,0)">稍后处理</el-button>
            <el-button type="success" @click="submitFeedback(test.pId,1)">产品不错</el-button>
            <div style="padding: 14px;">
              <div class="bottom clearfix">
                <time class="time">{{ test.cCreateTime }}</time>

              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </div>

    </el-col>

    <el-col :span="8"><div class="grid-content bg-purple">
<!--      right-->


      <div class="drag-box-item">
          <div class="item-title" style="margin-left:-50%">历史反馈消息</div>
          <draggable v-model="historyFeedback"  :options="dragOptions">
              <transition-group tag="div" id="done" class="item-ul">
                  <div v-for="item in historyFeedback" class="drag-list" :key="item.id">
                      {{item.content}}
                  </div>
              </transition-group>
          </draggable>
      </div>


    </div></el-col>
  </el-row>
</template>

<script>

  import draggable from 'vuedraggable'
  import Global from '../../utils/global'
  var test = {
    sId:"10000001",
    pId:"10001",
    cCreateTime:"2020-12-25 16:50:31",
    cType:"2",
    cFeedBack:"",
    cResponseType:"2",
    cFileUrl:"www.baidu.com"
  }
  export default {
    name: 'Messages',
    components:{
      draggable
    },
    props:['items'],
    data(){
      return {
        test:test,
        currentDate: new Date(2020,10,1,19,19,20),
        feedBack:"",//这个地方最后要写入test后，再commit到数据库
        historyFeedback:[],
        dragOptions:{
                    animation: 120,
                    scroll: true,
                    group: 'sortlist',
                    ghostClass: 'ghost-style'
                },
        glo : new Global,

      }
    },
    watch(){

    },
    methods:{
      getFile(url){
         var timestamp = (new Date()).valueOf();
         var token = md5("epms" + timestamp);
         window.open("http://47.92.227.185:8080/download/commitLogFile?token="+token+"&timestamp="+timestamp+"&url="+url);

      },
      submitFeedback(pId,feedbackType){
        /*
        反馈修改意见
        in:pId-项目id
        type:1-同意，0-不同意
         */
        if(feedbackType == 0){
          //稍后处理
          this.$message("稍后处理");
          this.replyNow.cFeedBack = this.feedBack;
          this.comitlogList.push(this.replyNow);
          this.replyNow = this.comitlogList[0,1];//当前在回复的消息
          this.comitlogList.splice(0,1);
          this.chageTest();
          // console.log(this.replyNow);
          // console.log('============');
          // console.log(this.comitlogList.length);
          return;
        }
        this.$confirm('确认提交反馈', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确认提交后

          //test复制到replynow中
           // this.replyNow.sId = this.test.sId;
           // this.replyNow.pId = this.test.pId;
           // this.replyNow.cCreateTime = this.test.cCreateTime;
           // this.replyNow.cType = this.test.cType;
           // this.replyNow.cFileUrl = this.test.cFileUrl;
          this.replyNow.cFeedback = this.feedBack;
          this.replyNow.cResponseType = feedbackType;//0 未处理，1同意，2驳回
          //后端接口
          console.log('reply:\n'+JSON.stringify(this.replyNow))
          this.glo.sendDate(this.glo.server+"client/checkCommitLog",this.replyNow,function (res) {
            console.log('res\n',res);
            if(res.success == true){
              alert("反馈成功，等待对方回复");
            }else{
              alert('反馈未成功，内部出错，请联系2787913282');
            }
          },"POST");
          //这里应有一个判断是否加入成功的逻辑，暂时没做
          // client/setProjectPeriodStatus
          this.glo.sendDate(this.glo.server+"client/checkCommitLog",{cId:this.cId,pId:this.replyNow.pId,status:(this.replyNow.status+1)%6},function (res) {});
          //提交成功后，前端切换
          this.replyNow = this.comitlogList[0,1];//当前在回复的消息
          this.comitlogList.splice(0,1);


          if (this.replyNow == null){
            alert('no messages');
          }
          else{
            this.chageTest();
          }
         //reply返回到后端
        }).catch(() => {
          //不提交

        });
      },
      initPage(res){
        console.log('res'+res.data.commitLogList);
        this.comitlogList = []//所有未回复的commits
        for(let i = 0 ; i < res.data.commitLogList.length;i++){
          //找到其中为空的commits
          var responseType = res.data.commitLogList[i].cResponseType
          console.log(i+':'+responseType)
          console.log(i+':'+res.data.commitLogList[i].cCreateTime)
          if (responseType === 0 || responseType ===  null){
            this.comitlogList.push(res.data.commitLogList[i]);
          }
        }

        console.log('lalal');

        console.log(this.comitlogList);
        this.replyNow = this.comitlogList[0,1];//当前在回复的消息
        this.comitlogList.splice(0,1);
        // console.log(this.comitlogList);
        if (this.replyNow == null){
          alert('no messages');
        }
        else{
          this.chageTest();
        }
        // console.log(this.test);


      },
      chageTest () {
        // console.log(this.replyNow)
        this.test.sId = this.replyNow.sId;
        this.test.pId = this.replyNow.pId;
        this.test.cCreateTime = this.replyNow.cCreateTime;
        this.test.cType = this.replyNow.cType;
        this.test.cFeedBack = this.replyNow.cFeedback;
        this.feedBack = this.replyNow.cFeedback;
        this.test.cResponseType = this.replyNow.cResponseType;
        this.test.cFileUrl = this.replyNow.cFileUrl;


      }
    },
    mounted () {
      // console.log('cId:'+this.items.cId);
      var data ={
        cId:this.items.cId
      }
      let glo;
      glo = new Global;
      glo.sendDate(glo.server+"client/GetCommitLog",
        data,this.initPage)


      for(let i = 0 ; i < 5;i++){
        this.historyFeedback.push({id:i,content:"这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试:"+i});
      }

      console.log('lala')
    }
  }
</script>


<style>
  img{
    max-width: 100%;

  }
</style>
<style scoped>

  #newMessages{
    width: 100%;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
  .feedBakcInput{
    margin-top: 5%;
    margin-bottom: 5%;
  }
  .item-title{
        padding: 8px 8px 8px 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #24292e;
        font-weight: 600;
    }
  .drag-box-item {
        flex: 1;
        max-width: 330px;
        min-width: 300px;
        background-color: #eff1f5;
        margin-right: 16px;
        border-radius: 6px;
        border: 1px #e1e4e8 solid;
    }
    .item-ul{
        padding: 0 8px 8px;
        height: 500px;
        overflow-y: scroll;
    }
    .item-ul::-webkit-scrollbar{
        width: 0;
    }
    .drag-list {
        border: 1px #e1e4e8 solid;
        padding: 10px;
        margin: 5px 0 10px;
        list-style: none;
        background-color: #fff;
        border-radius: 6px;
        cursor: pointer;
        -webkit-transition: border .3s ease-in;
        transition: border .3s ease-in;
    }
    .drag-list:hover {
        border: 1px solid #20a0ff;
    }
</style>
